<!--登录-->
<template>
    <div>
        <Toopbar></Toopbar>
        <div class="main">
            <section class="login-view">
                <div>
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="输入手机号/邮箱" />
                            <span ></span>
                            <div class="input-bg" ></div>
                        </div>
                        <div class="form-group">
                            <input type="password" class="form-control" placeholder="输入密码/验证码" />
                            <div class="input-bg"></div>
                        </div>
                        <div class="form-group captcha">
                            <input type="text" class="form-control code" placeholder="图形验证码"  />
                            <img src="" width="100" height="30"  />
                            <div class="input-bg"></div>
                        </div>
                        <div class="wrong-msg">

                        </div>
                        <button class="center-block submit" type="submit">登录</button>
                    </form>
                </div>
            </section>
        </div>
        <!--{{$route.params.id}}-->

    </div>
</template>

<script>
    import Toopbar  from '../Patch/Toopbar.vue';
    export  default {
        components :{
            Toopbar,
            
        }
    }
</script> 

<style>
    *{ margin:0; padding:0;box-sizing: border-box;}
    body{font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-size: 14px;line-height: 1.42857143;color: #333;background-color: #fff;}
    body,input,button,select,textarea,table{font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;font-family: 'Microsoft YaHei', Tahoma, Helvetica, Arial, sans-serif;}
    img{vertical-align:middle;border: 0;}
    a,button{outline: none;}
    form{display: block;margin-top: 0em;}

    .login-view{position: absolute;min-height: 100%;width: 100%;background-color: #f6f6f6;}
    .login-view form {padding: 0px 31px 0px 31px;}
    .login-view .form-group{margin: 30px 0 0;position: relative;}
    .form-control{display: block;width: 100%;height: 34px;padding: 6px 12px;font-size: 14px;line-height: 1.42857143;color: #555;background-color: #fff;background-image: none;border: 1px solid #ccc;border-radius: 4px;}
    .login-view input.form-control{border: none;background-color: #f6f6f6;border-radius: 0px;box-shadow: none;outline: none;}
    .login-view form .form-group .input-bg{position: absolute;top: 20px;height: 12px;width: 100%;border: solid #c4c4c4;border-width: 0 1px 1px 1px;}
    .login-view .captcha .code {display: inline-block;width: 50%;}

    .login-view .captcha {display: none;}
    .wrong-msg {display: block;height: 16px;color: #fe8233;padding-left: 8px;}
    .center-block{display: block;margin-right: auto;margin-left: auto;}
    .login-view .submit{width: 163px;background-color: #fe8233;color: #fff;border: none;border-radius: 36px;margin-top: 45px;padding: 8px 12px;font-size: 15px;outline: none;}
    
</style>

